<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-07-19 11:12:43
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-12-06 10:05:14
-->
<div class="my-approval">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>我的审批</span>
                </h3>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="row align-items-center">
                    <p-tabView [style]="{ height: '700px' }" (onChange)="onChange($event)">
                        <p-tabPanel header="未审批" [selected]="true">
                            <div class="primeng-datatable-container">
                                <p-table #dataTable [value]="primengTableHelper.records"
                                    (onLazyLoad)="getTableList($event)"
                                    rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                    [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                    [responsive]="primengTableHelper.isResponsive"
                                    [resizableColumns]="primengTableHelper.resizableColumns">
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width: 100px">操作</th>
                                            <th style="width: 50px">序号</th>
                                            <th style="width: 150px">业务单号</th>
                                            <th style="width: 150px">功能模块</th>
                                            <th style="width: 150px">业务描述</th>
                                            <th style="width: 150px">菜单</th>
                                            <th style="width: 150px">审批类型</th>
                                            <!-- <th style="width: 150px">审批状态</th> -->
                                            <th style="width: 150px">发起人</th>
                                            <th style="width: 150px">发起时间</th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                        <tr>
                                            <td style="width: 100px">
                                                <div class="btn-group dropdown" dropdown container="body">
                                                    <button dropdownToggle
                                                        class="dropdown-toggle btn btn-sm btn-primary">
                                                        <i class="fa fa-cog"></i><span class="caret"></span> 操作
                                                    </button>
                                                    <ul class="dropdown-menu" *dropdownMenu>
                                                        <li>
                                                            <a href="javascript:;" (click)="detaillLook(record,true)">详情</a>
                                                        </li>
                                                        <!-- <li>
                                                            <a href="javascript:;" (click)="rollback(record,true)">撤回</a>
                                                        </li> -->
                                                    </ul>
                                                </div>
                                            </td>
                                            <td style="width: 50px;"> {{rowIndex+1}} </td>
                                            <td style="width: 150px">{{record.businessNumber}}</td>
                                            <td style="width: 150px">{{record.funModule}}</td>
                                            <td style="width: 150px">{{record.businessDesc}}</td>
                                            <td style="width: 150px">{{record.menu }}</td>
                                            <td style="width: 150px">{{record.menu + '审批'}}</td>
                                            <!-- <td style="width: 150px">{{record.approvalDesc}}</td> -->
                                            <td style="width: 150px">{{record.userName}}</td>
                                            <td style="width: 150px">{{record.applicationDate | momentFormat:'YYYY-MM-DD
                                                HH:mm:ss'}}</td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                                <div class="primeng-paging-container">
                                    <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                        (onPageChange)="getTableList($event)"
                                        [totalRecords]="primengTableHelper.totalRecordsCount"
                                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                    </p-paginator>
                                    <span class="total-records-count">
                                        {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                                    </span>
                                </div>
                            </div>
                        </p-tabPanel>
                        <p-tabPanel header="已审批的节点">
                            <div class="primeng-datatable-container">
                                <p-table #dataTable2 [value]="primengSonTableHelper.records"
                                    (onLazyLoad)="getSonTableList($event)"
                                    rows="{{primengSonTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                    [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                    [responsive]="primengTableHelper.isResponsive"
                                    [resizableColumns]="primengSonTableHelper.resizableColumns">
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width: 100px">操作</th>
                                            <th style="width: 50px">序号</th>
                                            <th style="width: 150px">业务单号</th>
                                            <th style="width: 150px">功能模块</th>
                                            <th style="width: 150px">业务描述</th>
                                            <th style="width: 150px">菜单</th>
                                            <th style="width: 150px">审批类型</th>
                                            <th style="width: 150px">审批操作</th>
                                            <th style="width: 150px">发起人</th>
                                            <th style="width: 150px">发起时间</th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                        <tr>
                                            <td style="width: 100px">
                                                <div class="btn-group dropdown" dropdown container="body">
                                                    <button dropdownToggle
                                                        class="dropdown-toggle btn btn-sm btn-primary">
                                                        <i class="fa fa-cog"></i><span class="caret"></span> 操作
                                                    </button>
                                                    <ul class="dropdown-menu" *dropdownMenu>
                                                        <li>
                                                            <a href="javascript:;" (click)="detaillLook(record,false)">详情</a>
                                                        </li>
                                                        <!-- <li>
                                                            <a href="javascript:;" (click)="rollback(record,false)">撤回</a>
                                                        </li> -->
                                                    </ul>
                                                </div>
                                            </td>
                                            <td style="width: 50px;"> {{rowIndex+1}} </td>
                                            <td style="width: 150px">{{record.businessNumber}}</td>
                                            <td style="width: 150px">{{record.funModule}}</td>
                                            <td style="width: 150px">{{record.businessDesc}}</td>
                                            <td style="width: 150px">{{record.menu }}</td>
                                            <td style="width: 150px">{{record.menu + '审批'}}</td>
                                            <td style="width: 150px">{{record.operationtContent}}</td>
                                            <td style="width: 150px">{{record.userName}}</td>
                                            <td style="width: 150px">{{record.applicationDate | momentFormat:'YYYY-MM-DD
                                                HH:mm:ss'}}</td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                                <div class="primeng-paging-container">
                                    <p-paginator [rows]="primengSonTableHelper.defaultRecordsCountPerPage" #paginator2
                                        (onPageChange)="getSonTableList($event)"
                                        [totalRecords]="primengSonTableHelper.totalRecordsCount"
                                        [rowsPerPageOptions]="primengSonTableHelper.predefinedRecordsCountPerPage">
                                    </p-paginator>
                                    <span class="total-records-count">
                                        {{'TotalRecordsCount' | localize:primengSonTableHelper.totalRecordsCount}}
                                    </span>
                                </div>
                            </div>
                        </p-tabPanel>
                    </p-tabView>

                </div>
            </div>
        </div>
    </div>
    <!-- 规程审批 -->
    <app-procedure-change #ProcedureChangeComponent [flag]="flag" [rowdata]="rowdata"  [title]="title" (modalSave)="getTableList()"> </app-procedure-change>
    <!-- 设计BOM审批 -->
    <app-bom #BomComponent [editData]="rowdata" [title]="title" (modalSave)="getTableList()" [flag]="flag"></app-bom>
    <!-- Bom变更审批 -->
    <app-bon-change #BonChangeComponent [rowdata]="rowdata" [title]="title" (modalSave)="getTableList()" [flag]="flag"> </app-bon-change>
</div>